/*
 * beaselector - jQuery plugin for diy the select element
 *
 * Copyright (c) 2009 SkindX
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *
 * @Author		YunXiong (SkindX)
 * @Version		1.0
 * @Date		2009-08-27
 * @Email		xyfreeer85@gtalk.com
 */

/**
 * 在遵循MIT和GPL协议之下，您可以自由使用，请务必保留作者版权信息
 * 如果在使用过程中，发现任何问题，欢迎Email告知，谢谢
 *
 */

(function($){
	$.fn.extend({
		//pass the options variable to the function
		bea_selector:function(options){
			//set the default values ,use comma to separate the settings,example:
			var defaults={
				inputid:'',//选择select存储值的地方
				width:150,//列表宽度
				height:0,//列表高度，默认为0，表式全部显示，没有滚动条
				itemHeight:19,//列表中单个条目的宽度
				onchange:null//触发change的事件
			}
			var options=$.extend(defaults,options);
			var slide = {
				top:0,
				pageY:0,
				hideHeight:0,
				rate:1,
				per:0,
				hideItemContainer:'',
				dragbar:'',
				drag: function(e) {
					e=e||window.event;
					var drag_top_px = Math.min(Math.max(e.pageY - slide.pageY+ slide.top, 0), slide.hideHeight);
					var drag_margin_top_px=drag_top_px*slide.rate;
					slide.hideItemContainer.css('top','-0px');
					slide.dragbar.css('top',drag_top_px+'px');
					slide.hideItemContainer.css('margin-top','-'+drag_margin_top_px+'px');
				},
				drop: function(e) {
					$().unbind('mousemove', slide.drag).unbind('mouseup', slide.drop);
				}
			};
			return this.each(function(){
				$id=$(this).attr('id');
				if(!$id)
				{
					$id=$('.showDiv').length;
					$(this).attr('id',"beaselect_"+$id);
				}
				if($('#beashow_'+$id).length)
				{
					return this;
				}
				var o=options;

				var obj=$(this);
				//获取select的选中指，选中索引，选中的文本信息和options的数量
				var selIndex=obj[0].selectedIndex||0;
				var selValue=obj[0].options[selIndex].value;
				var selText=obj[0].options[selIndex].text;
				var len=obj[0].options.length;

				//计算下拉列表的高度，包括隐藏的高度
				var hideListHeight=len*o.itemHeight;
				if(o.height==0)o.height=hideListHeight;
				o.height+=2;
				
				//计算选中索引值所占总长度的%
				var per=selIndex/len;
				//是否溢出
				var spare=o.height-parseInt((1-per)*hideListHeight);
				//
				var top_px=parseInt(per*hideListHeight);
				if(spare>0)top_px-=spare;
				
				//构建显示框
				var showDivHtml='<div class="showDiv" id="beashow_'+$id+'" style="float:left;width:'+o.width+'px;" >'+selText+'</div>';
				var showDiv=$(showDivHtml);
				
				//构建下拉列表
				var hideList=$('<div style="position:absolute;left:0px;top:22px;width:'+o.width+'px;display:none;height:'+o.height+'px;overflow:hidden;"></div>');
				//构建options的容器
				var hideLeftDiv=$('<a href="#" style="position:relative;display:block;text-decoration:none;float:left;width:'+(o.width-20)+'px;"></a>');
				var hideItemContainer=$('<div class="hideItemContainer" style="position:absolute;width:100%;top:-'+top_px+'px"></div>');

				//讲options中的数据push到item中
				var item='';
				var num=0;
				$('option',obj).each(function(){
					if(num==selIndex)
						item+='<div class="selectedItem" style="cursor:default;width:100%;height:'+o.itemHeight+'px;" val="'+num+'">'+$(this).text()+'</div>';
					else
						item+='<div class="unselectedItem" style="cursor:default;width:100%;height:'+o.itemHeight+'px;" val="'+num+'">'+$(this).text()+'</div>';
					num++;
				});
				
				//下拉列表被隐藏的高度
				var hideHeight=hideListHeight-o.height;
				//滚动条背景的高度
				var dragbarHeight=o.height-48;
				//已完成的%
				var overDragbarHeight=per*dragbarHeight;
				//拖动条的高度
				var sliderbarHeight=o.height/hideListHeight*(dragbarHeight);
				//下拉列表拖动时和拖动条拖动时的比值
				var rate=hideHeight/(dragbarHeight-sliderbarHeight);
				//如果溢出，则补回
				if(spare>0)overDragbarHeight-=spare/rate;

				//列表装饰
				hideItemContainer.html(item);
				hideLeftDiv.append(hideItemContainer);
				hideList.append(hideLeftDiv);
				
				//构建滚动条
				var scrollDiv=$('<div class="scrollBg" style="position:absolute;left:'+(o.width-20)+'px;height:'+o.height+'px;float:left;"><div class="scrollUp"></div><div class="scrollBody" style="height:'+dragbarHeight+'px;position:relative;"><div class="scrollBar" style="position:absolute;height:'+sliderbarHeight+'px;top:'+overDragbarHeight+';" id="dragbar"></div></div><div class="scrollDown"></div></div>');
				hideList.append(scrollDiv);
				//构建content，并插入到body中去
				var contentDiv=$('<div style="width:'+o.width+'px;float:left;position:relative; z-index:1001"><input type="hidden" value="'+selValue+'" id="'+o.inputid+'"/></div>');
				contentDiv.append(showDiv);
				contentDiv.append(hideList);
				obj.after(contentDiv);
				hideList.css('top',showDiv.outerHeight()-1);
				obj.hide();

				hideLeftDiv.click(function(e){
					//如果提供了事件对象，则这是一个非IE浏览器
					if ( e && e.stopPropagation )
					//因此它支持W3C的stopPropagation()方法
					e.stopPropagation();
					else
					//否则，我们需要使用IE的方式来取消事件冒泡
					window.event.cancelBubble = true;
					if ( e && e.preventDefault )
					//阻止默认浏览器动作(W3C)
					e.preventDefault();
					else
					//IE中阻止函数器默认动作的方式
					window.event.returnValue = false;
					return false;
				})

				//获取拖动条
				var dragBar=scrollDiv.find('.scrollBar');
				//当下拉列表的高度小于指定值的时候，则不显示滚动条，同时修正容器的高度
				if(hideListHeight<=o.height)
				{
					scrollDiv.css('display','none');
					hideLeftDiv.css('width',o.width+'px');
				}

				var hideListOp=function(){
					hideList.hide();
				}
				
				//对Item绑定行为事件
				$('div',hideItemContainer).bind('mouseover',function(){
					$(this).removeClass('mout').addClass('mover');
				}).bind('mouseout',function(){
					$(this).removeClass('mover').addClass('mout');
				}).click(function(){
					hideLeftDiv.unbind('blur');
					dragBar.unbind('blur');
					var clickIndex=$(this).attr('val');
					var selIndex=obj[0].selectedIndex;
					if(clickIndex!=selIndex)
					{
						$('div',hideItemContainer).removeClass('selectedItem').addClass('unselectedItem');
						$(this).removeClass('unselectedItem').addClass('selectedItem');
						showDiv.text($(this).text());
						var clickVal=obj[0].options[clickIndex].value;
						//$('#'+o.inputid).val(clickVal);
						contentDiv.find('input').val(clickVal);
						obj[0].selectedIndex=clickIndex;
						if(o.onchange!=null)
						{
							if(typeof(o.onchange) == "string")
							{
								eval(o.onchange);
							}else
							{
								o.onchange();
							}
						}
					}
					hideList.hide();
				});

				//对容器绑定行为事件
				hideItemContainer.bind('mouseover',function(){
					hideLeftDiv.unbind('blur');
					dragBar.unbind('blur');
				}).bind('mouseout',function(){
					hideLeftDiv.bind('blur',hideListOp);
					dragBar.bind('blur',hideListOp);
				});
				
				//单击显示框，显示下拉列表
				showDiv.click(function(){
					hideList.show();
					hideLeftDiv.bind('blur',hideListOp);
					hideLeftDiv[0].focus();
				});

				//对拖动条绑定行为事件
				dragBar.bind('mousedown', function(e) {
					hideLeftDiv.unbind('blur');
					e=e||window.event;
					var topVal=parseInt($(this).css('top'));

					slide.top=isNaN(topVal)?0:topVal;
					slide.pageY=e.pageY;
					slide.rate=rate;
					slide.per=per;
					slide.hideHeight=dragbarHeight-sliderbarHeight;
					slide.hideItemContainer=hideItemContainer;
					slide.dragbar=dragBar;
					$().bind('mousemove',slide.drag).bind('mouseup',slide.drop);
					$(this).bind('blur',hideListOp);
				});

				if($.browser.mozilla){
					dragBar.bind('mouseout', function() {
						hideLeftDiv.bind('blur',hideListOp);
						hideLeftDiv[0].focus();
					});
				}
			});
		},
		hidden: function() {
            $id=$(this).attr('id');
			$('#beashow_'+$id).parent().hide();
        },
		setValue:function(i){
			$id=$(this).attr('id');
			obj=$(this);
			obj[0].selectedIndex=i;
			$('#beashow_'+$id).text(obj[0].options[i].text);
		},
		rebuild:function(conf)
		{
			$id=$(this).attr('id');
			$('#beashow_'+$id).parent().remove();
			$('#'+$id).bea_selector(conf);
		}
	});
})(jQuery);